<template>
  <view class="wallet">
    <header-vue :back="true" :title="title" bgColor="transparent"></header-vue>

    <!-- 背景渐变 -->
    <view class="background-gradient">
      <image
        :src="IMAGE_URL+'/static/master/qianbao.png'"
        class="bg-image"
        mode="widthFix"
      />
    </view>

    <view class="wallet-content">
      <!-- 保证金卡片 -->
      <view class="deposit-card">
        <view class="deposit-amount">
          <text class="amount-symbol">￥</text>
          {{ depositData.amount }}
        </view>
        <view class="deposit-tip">{{ depositData.tip }}</view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="btn btn-recharge" @click="handleRecharge">充值</button>
          <button class="btn btn-withdraw" @click="handleWithdraw">提现</button>
        </view>
      </view>

      <!-- 充值记录 -->
      <view class="records-section">
        <view class="section-header">
          <view class="section-title"
            ><image
              :src="IMAGE_URL+'/static/master/title-icon.png'"
              class="title-icon"
            ></image
            >充值记录</view
          >
        </view>

        <view class="records-list">
          <view
            v-for="(record, index) in rechargeRecords"
            :key="index"
            class="record-item"
          >
            <view class="record-info">
              <text class="record-type">充值</text>
              <text class="record-time">{{ record.time }}</text>
            </view>
            <view class="record-amount">+{{ record.amount }}</view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="rechargeRecords.length === 0" class="empty-state">
          <u-icon name="list" color="#ccc" size="60"></u-icon>
          <text class="empty-text">暂无充值记录</text>
        </view>
      </view>

      <!-- 充值弹窗 -->
      <u-popup
        :show="showRechargePopup"
        mode="bottom"
        round="20"
        @close="showRechargePopup = false"
      >
        <view class="recharge-popup">
          <view class="popup-header">
            <text class="popup-title">充值</text>
            <u-icon name="close" @click="showRechargePopup = false"></u-icon>
          </view>

          <view class="popup-content">
            <view class="amount-input">
              <text class="input-label">充值金额</text>
              <view class="input-wrapper">
                <text class="currency-symbol">￥</text>
                <input
                  v-model="rechargeAmount"
                  type="number"
                  placeholder="请输入充值金额"
                  class="amount-input-field"
                />
              </view>
            </view>

            <view class="quick-amounts">
              <text class="quick-label">快捷金额</text>
              <view class="amount-buttons">
                <button
                  v-for="amount in quickAmounts"
                  :key="amount"
                  class="amount-btn"
                  :class="{ active: rechargeAmount == amount }"
                  @click="rechargeAmount = amount"
                >
                  ￥{{ amount }}
                </button>
              </view>
            </view>
          </view>

          <view class="popup-footer">
            <button class="confirm-btn" @click="handleRechargeConfirm">
              确认充值
            </button>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,

export default {
  data() {
    return {
       IMAGE_URL: appConfig.IMAGE_URL,
      title: "保证金",
      showRechargePopup: false,
      rechargeAmount: "",
      depositData: {
        amount: "200.00",
        tip: "保证金不得低于200，否则影响接单",
      },
      rechargeRecords: [
        {
          type: "充值",
          time: "2025-04-06 15:45",
          amount: "200.00",
        },
      ],
      quickAmounts: [100, 200, 300, 500],
    };
  },
  components: {
    headerVue,
  },
  methods: {
    // 处理充值
    handleRecharge() {
      // this.showRechargePopup = true;
      // this.rechargeAmount = "";
      uni.navigateTo({
        url: "/views-master/my/top-up",
      });
    },

    // 处理提现
    handleWithdraw() {
      // uni.showModal({
      //   title: "提现申请",
      //   content: "确定要提现保证金吗？",
      //   success: (res) => {
      //     if (res.confirm) {
      //       // 这里调用提现API
      //       uni.showToast({
      //         title: "提现申请已提交",
      //         icon: "success",
      //         duration: 2000,
      //       });
      //     }
      //   },
      // });
      uni.navigateTo({
        url: "/views-master/my/withdraw",
      });
    },

    // 确认充值
    handleRechargeConfirm() {
      if (!this.rechargeAmount || this.rechargeAmount <= 0) {
        uni.showToast({
          title: "请输入充值金额",
          icon: "none",
        });
        return;
      }

      uni.showLoading({ title: "充值中..." });

      // 模拟充值请求
      setTimeout(() => {
        uni.hideLoading();

        // 添加充值记录
        const newRecord = {
          type: "充值",
          time: this.getCurrentTime(),
          amount: parseFloat(this.rechargeAmount).toFixed(2),
        };

        this.rechargeRecords.unshift(newRecord);

        // 更新保证金金额
        this.depositData.amount = (
          parseFloat(this.depositData.amount) + parseFloat(this.rechargeAmount)
        ).toFixed(2);

        this.showRechargePopup = false;
        uni.showToast({
          title: "充值成功",
          icon: "success",
        });
      }, 1500);
    },

    // 获取当前时间
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #f7f7f7;

  .background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400rpx;
    z-index: 0;

    .bg-image {
      width: 100%;
      height: 100%;
    }
  }

  .wallet-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    padding: 40rpx 32rpx 32rpx;
  }

  .deposit-card {
    margin-bottom: 30rpx;

    text-align: center;
  }

  .deposit-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 30rpx;
  }

  .deposit-amount {
    font-size: 68rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 20rpx;
    line-height: 1;
  }

  .amount-symbol {
    font-size: 48rpx;
  }

  .deposit-tip {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 40rpx;
    line-height: 1.4;
  }

  .action-buttons {
    display: flex;
    gap: 30rpx;
    justify-content: center;
  }

  .btn-recharge {
    color: #ffffff;
    border: none;
    width: 202rpx;
    font-size: 32rpx;
    height: 68rpx;
    background: #209fea;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    text-align: center;
    line-height: 68rpx;
    margin: 0;
    &::after {
      border: none;
    }

    &:active {
      background: #209fea;
    }
  }

  .btn-withdraw {
    color: #ffffff;
    border: none;
    width: 202rpx;
    font-size: 32rpx;
    height: 68rpx;
    background: #df9824;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    text-align: center;
    line-height: 68rpx;
    margin: 0;
    &::after {
      border: none;
    }

    &:active {
      background: #df9824;
    }
  }

  .records-section {
    padding: 28rpx;
    margin-top: 48rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .section-header {
    padding-bottom: 10rpx;
  }

  .section-title {
    font-size: 30rpx;
    color: #222;
    font-weight: 600;
  }

  .records-list {
    max-height: 400rpx;
    overflow-y: auto;
  }

  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }
  }

  .record-info {
    display: flex;
    flex-direction: column;
  }

  .record-type {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 8rpx;
  }

  .record-time {
    font-size: 24rpx;
    color: #999999;
  }

  .record-amount {
    font-size: 32rpx;
    font-weight: 600;
    color: #52c41a;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    color: #ccc;
  }

  .empty-text {
    font-size: 28rpx;
    margin-top: 20rpx;
    color: #999;
  }

  // 充值弹窗样式
  .recharge-popup {
    padding: 40rpx;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
  }

  .popup-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  .title-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
  .popup-content {
    margin-bottom: 40rpx;
  }

  .amount-input {
    margin-bottom: 40rpx;
  }

  .input-label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 20rpx;
  }

  .currency-symbol {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-right: 10rpx;
  }

  .amount-input-field {
    flex: 1;
    font-size: 32rpx;
    color: #333;
  }

  .quick-amounts {
    margin-bottom: 20rpx;
  }

  .quick-label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .amount-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }

  .amount-btn {
    flex: 1;
    min-width: 150rpx;
    background: #f8f9fa;
    border: 1rpx solid #e8e8e8;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;

    &.active {
      background: #0785cf;
      color: #fff;
      border-color: #0785cf;
    }

    &::after {
      border: none;
    }
  }

  .confirm-btn {
    width: 100%;

    color: #fff;
    border: none;
    line-height: 76rpx;
    font-size: 36rpx;
    font-weight: 500;
    width: 630rpx;
    height: 76rpx;
    background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    &::after {
      border: none;
    }
  }
}
</style>
